<template>
        <div class="dialog">
            <div class="title">业务系统基本信息</div>
            <div class="wrap1">
                <div><div>系统名称:</div><span style="color: #38b3aa;">{{form.cloudSystem.projectname}}</span></div>
                <div><div>业务部门:</div>{{form.cloudSystem.officeName}}</div>
                <div><div>上线时间:</div>{{form.cloudSystem.onlinetime}}</div>
                <div><div>业主方联系人:</div>{{form.cloudSystem.contactsNickName}}</div>
                <div><div>联系电话:</div>{{form.cloudSystem.contactsinfo}}</div>
                <div><div>邮箱:</div>{{form.cloudSystem.email}}</div>
                <div style="width: 100%;"><div>承建单位:</div>{{form.cloudSystem.constunit}}</div>
                <div><div>承建方联系人:</div>{{form.cloudSystem.constcts}}</div>
                <div><div>联系电话:</div>{{form.cloudSystem.constctsinfo}}</div>
                <div><div>邮籍:</div>{{form.cloudSystem.constemail}}</div>
                <div style="width: 100%;"><div style="width: auto;">系统建设（运维）资金来源:</div>{{form.cloudSystem.fundFrom}}</div>
                <div style="width: 100%;"><div  style="width: auto;">自行落实部门上云经费:</div>{{form.cloudSystem.fundBySelf?'是':'否'}}</div>
                <div style="width: 100%;"><div>项目简介:</div>{{form.cloudSystem.introduction}}</div>
                <div style="width: 100%;"><div>申请理由:</div>{{form.cloudSystem.remarks}}</div>
            </div>
            <div class="title">申请资源</div>
            <div style="width: 100%;"><label style="margin-right: 10px;">服务商:</label>
              <span v-for="item in configure.cloud_service_provider"
              v-if="item.dictValue==form.cloudSystem.cloudServiceProvider">{{item.dictLabel}}</span>
            </div>
            <el-table  :data="form.hosts"  style="width: 100%;margin-top: 20px;">
                     <el-table-column label="主机名称"  prop="hostName"/>
                     <el-table-column label="资源类型"  prop="j"/>
                     <el-table-column label="数量"  prop="instanceNum"/>
                     <el-table-column label="资源详情">
                       <template slot-scope="scope">
                         <el-popover
                           placement="top-start"
                           width="300"
                           trigger="hover">
                               <div style="margin-bottom: 6px;"
                                  v-for="item in configure.available_domain"
                                  v-if="item.dictValue==scope.row.availableDomain">
                                 <label>可用域：</label>{{item.dictLabel}}
                               </div>
                               <div style="margin-bottom: 6px;"><label>规格分类：</label>通用服务器</div>
                               <div style="margin-bottom: 6px;"><label>vCPU(核)：</label>{{scope.row.b}}</div>
                               <div style="margin-bottom: 6px;"><label>GPU(核)：</label>{{scope.row.c}}</div>
                               <div style="margin-bottom: 6px;"><label>内存(GB)：</label>{{scope.row.d}}</div>
                               <div style="margin-bottom: 6px;"
                                  v-for="item in configure.storage_type"
                                  v-if="item.dictValue==scope.row.systemDiskType">
                                  <label>系统盘类型：</label>{{item.dictLabel}}
                                </div>
                               <div style="margin-bottom: 6px;"><label>系统盘大小(GB)：</label>{{scope.row.systemDiskSize}}</div>
                               <div style="margin-bottom: 6px;"><label>数据盘(共<span style="color: #E83112;">
                               {{scope.row.disks.length}}</span>块):</label></div>
                               <div style="margin:0 0 6px 16px;" v-for="item in scope.row.disks">
                                <span v-for="it in configure.storage_type"
                                  v-if="it.dictValue==item.dataDiskType">{{it.dictLabel}}</span>，{{item.dataDiskSize}}GB，{{item.diskNum}}块
                               </div>
                           <div style="color: #3a8dfd;" slot="reference">
                             详情
                           </div>
                         </el-popover>
                       </template>
                     </el-table-column>
                     <!-- <el-table-column label="网络和安全协议">
                       <template slot-scope="scope">
                         <el-popover
                           placement="top-start"
                           width="300"
                           trigger="hover">
                              <div style="margin-bottom: 6px;"><label>电子政务网：</label></div>
                                 <div style="margin:0 0 6px 16px;">数量：1，带宽：100MB</div>
                              <div style="margin-bottom: 6px;"><label>互联网：</label></div>
                                 <div v-for="item in [1,11]" style="margin:0 0 6px 16px;">运营商：xx，数量：1，带宽：100MB</div>
                               <div style="margin-bottom: 6px;"><label>网卡配置：</label></div>
                                 <div v-for="item in [1,11]" style="margin:0 0 6px 16px;">IP地址：xx，MAC地址：xx</div>
                               <div style="margin-bottom: 6px;"><label>端口配置：</label></div>
                                 <div v-for="item in [1,11]" style="margin:0 0 6px 16px;">协议类型：xx，端口：xx</div>
                           <div style="color: #3a8dfd;" slot="reference">
                             详情
                           </div>
                         </el-popover>
                       </template>
                     </el-table-column> -->
            </el-table>

            <div class="wrap1" style="margin-top: 10px;">
                <div style="width: 100%;line-height: 28px;"><div>云资源合计:</div>
                    虚拟机10台<br/>vCPU10核<br/>内存10GB<br/>存储1010TB（其中：分布式存储1010_TB、FC存储、1010TB、视频云存储、1010TB、高性能存储1010TB）
                    物理机10台<br/>CPU10核<br/>内存10GB<br/>存储1010TB（其中：分布式存储1010TB、FC存储、1010TB、高性能存储1010TB）
                </div>
                <div style="width: 100%;"><div>预估费用:</div><span style="color: #E83112">¥10000.00</span></div>
           </div>

            <div class="title" style="margin-top: 30px;">安全产品</div>
            <div class="wrap1">
                <!-- <div style="width: 100%;">{{form.aqchecked.join('、')}}</div> -->
            </div>
            <div class="title" style="margin-top: 30px;">其他</div>
            <div class="wrap2" style="padding-top: 1px;">
                <div style="display: flex;"><span style="font-weight: bold;margin-right: 10px;">说明:</span>{{form.cloudSystem.remark}}</div>
               <div style="font-weight: bold;">文件:</div>
                <el-table :data="files"  style="width: 100%">
                   <el-table-column label="文件名"  prop="instanceId"/>
                   <el-table-column label="类型"  prop="instanceId"/>
                   <el-table-column label="大小"  prop="instanceId"/>
                   <el-table-column label="进度"  prop="instanceId"/>
                   <el-table-column label="路径"  prop="instanceId"/>
                </el-table>
            </div>
        </div>
</template>

<script>


export default {
  name: "detail",
  components: {
  },
  props: {
      configure:{
        type:Object,
        default:{
          available_domain:[],//可用域
          cloud_service_provider:[],//服务商
          storage_type:[],//数据盘类型
        }
      },
      form:{
        type:Object,
        default:{}
      }
  },
  data() {
    return {
      loading:false,
      demoList:[{
        a:'浪潮云',j:'云服务器',b:4,c:8,d:8,e:128,f:'分布式存储',g:`windows/win10`,h:['分布式存储，4GB，数量：2','分布式存储，8GB，数量：3'],i:1
      }
      ],
      files:[]
    };
  },
  created() {
  },
  methods: {


  }
};
</script>
<style scoped lang="less">
  .dialog{
    // padding-right: 20px;
    font-size: 12px;
    .title{
      text-align: left;
     margin-bottom: 20px;
     font-size: 16px;
     padding-left: 4px;
     border-left: 4px solid #38b3aa;
    }
    .wrap1{
      padding:0  20px 20px 0px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
       margin-bottom: 30px;
      // justify-content: space-between;
      border-radius: 10px;
      div{
        margin-top: 20px;
        margin-left: 20px;
        width: calc(33.33% - 20px);
        min-width: 340px;
        display: flex;
        div{
          width: 100px;
          min-width:100px;
          font-weight: bold;
          margin: 0;
          display: flex;
          padding-right: 10px;
          justify-content: flex-end;
        }
      }
    }
    .wrap2{
      padding:0  20px 20px 20px;
      background: #faf9ff;
       margin-bottom: 30px;
      justify-content: space-between;
      border-radius: 10px;
      div{
        margin-top: 20px;
      }
    }
    .wrap3{
      padding:20px;
      background: #faf9ff;
      margin-bottom: 30px;
      justify-content: space-between;
      border-radius: 10px;
    }
  }
</style>
